<template>
  <a-card>
    <template #extra>
      <a-space>
        <a-button :icon="loading ? 'loading' : 'reload'" @click="fetchData()">
        </a-button>
      </a-space>
    </template>

    <a-table size="small" :columns="columns" :data-source="data" :pagination="false" :row-key="record => record.id" :loading="loading">
      <template slot="distributor" slot-scope="text, record">
        <a @click="openDistributorHotel(record.distributor, record.hotelId)">{{ text }}</a>
      </template>
      <template slot="distributorHotelId" slot-scope="text, record">
        <a v-if="record.distributor.indexOf('ctrip')>=0 && (text !== undefined && text !== '')" :href='"http://hotels.ctrip.com/international/" + text + ".html?fixsubhotel=T"' target='_blank'>{{text}}</a>
        <a v-else-if="record.distributor.indexOf('alitrip')>=0 && (text !== undefined && text !== '')" :href='"https://hotel.fliggy.com/hotel_detail2.htm?shid=" + text' target='_blank'>{{text}}</a>
        <span v-else>{{text}}</span>
      </template>
      <template slot="distributorCityName" slot-scope="text, record">
        <span v-if="record.distributorCityId !== undefined && record.distributorCityId !== ''">{{ record.distributorCityId }}.{{ record.distributorCityName }}</span>
      </template>
      <template slot="pushStatus" slot-scope="text">
        {{ $t("push_status_arr." + text)}}
      </template>
      <template slot="pushResult" slot-scope="text">
        {{ $t("push_result_arr." + text)}}
      </template>
      <a-icon slot="isonline" slot-scope="text" :type="text == 1?'check-circle':'close-circle'" :style="text == 1?'color:#52c41a;font-size: 18px;':'font-size: 18px;'"/>
      <template v-for="(item, index) in columns" :slot="item.slotName">
        <span :key="index">{{ $t(item.slotName) }}</span>
      </template>
    </a-table>

  </a-card>
</template>

<script>
import {getHotelList} from '@/services/distributor'

export default {
  name: "DistributorHotel",
  props: ['HotelId'],
  i18n: require('../i18n'),
  data() {
    return {
      searchParams: {},
      loading: false,
      data: [],
      columns: [
        {
          dataIndex: 'distributor',
          align: 'left',
          slotName: "distributor",
          slots: {title: 'distributor'},
          scopedSlots: {customRender: 'distributor'},
        },
        {
          dataIndex: 'distributorHotelId',
          align: 'left',
          slotName: "distributor_hotel_id",
          slots: {title: 'distributor_hotel_id'},
          scopedSlots: {customRender: 'distributorHotelId'},
        },
        {
          dataIndex: 'isonline',
          align: 'center',
          slotName: "sale_status",
          slots: {title: 'sale_status'},
          scopedSlots: {customRender: 'isonline'},
        },
        {
          dataIndex: 'distributorCityName',
          align: 'left',
          slotName: "distributor_city_name",
          slots: {title: 'distributor_city_name'},
          scopedSlots: {customRender: 'distributorCityName'},
        },
        {
          dataIndex: 'pushStatus',
          align: 'left',
          slotName: "push_status",
          slots: {title: 'push_status'},
          scopedSlots: {customRender: 'pushStatus'},
        },
        {
          dataIndex: 'pushResult',
          align: 'left',
          slotName: "push_result",
          slots: {title: 'push_result'},
          scopedSlots: {customRender: 'pushResult'},
        },
        {
          dataIndex: 'pushError',
          align: 'left',
          slotName: "push_error",
          slots: {title: 'push_error'},
        },
      ],
    }
  },
  methods: {
    fetchData(){
      this.loading = true
      this.searchParams.hotelId = this.$route.params.hotelId
      getHotelList(1, 1000, this.searchParams).then(res => {
        this.data = res.data.data.rows
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    openDistributorHotel(distributor, hotelId){
      this.$openPage('/distributor/detail/' + distributor + '/' + hotelId, "[" + distributor + "][" + hotelId + "]")
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
      );
    },
  },
  created() {
    this.fetchData()
  },
}
</script>

<style scoped>

</style>